<template>
  <div style="padding: 24px">
    <a-card
      v-for="(question, index) in questions"
      :key="index"
      :title="`判断题 ${index + 1}`"
      style="margin-bottom: 24px"
    >
      <div class="question-title">{{ question.contentChoice.title }}</div>

      <div style="margin: 16px 0">
        <a-radio-group v-model:value="question.userAnswer">
          <a-radio :value="'1'">正确</a-radio>
          <a-radio :value="'0'">错误</a-radio>
        </a-radio-group>
      </div>

      <a-button type="primary" @click="() => handleSubmit(question)">提交答案</a-button>

      <div v-if="question.checked" style="margin-top: 16px">
        <a-alert
          :message="question.userAnswer === question.answer ? '回答正确' : (question.answer === '1' ? '回答错误，正确答案是：正确' : '回答错误，正确答案是：错误')"
          :type="question.userAnswer === question.answer ? 'success' : 'error'"
          show-icon
        />
        <a-collapse style="margin-top: 12px">
          <a-collapse-panel key="1" header="答案解析">
            {{ question.analysis }}
          </a-collapse-panel>
        </a-collapse>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {question} from "@/api/testQuestionController"


const questions = ref([])

onMounted(async () => {
  try {
    const res = await listQuestions({ 
      questionType: 4,
      questionTag: videoID,
      page: 1,
      size: 10
    })
    const list = res.data?.data?.records || []

    questions.value = list
      .filter(q => Number(q.questionType) === 4 && q.content)
      .map(q => ({
        ...q,
        contentChoice: JSON.parse(q.content),
        userAnswer: '',
        isCorrect: false
      }))
  } catch (error) {
    console.error('题目加载失败：', error)
  }
})

function handleSubmit(question) {
  if (question.userAnswer !== null) {
    question.checked = true
  }
}
</script>

<style scoped>
.question-title {
  font-size: 16px;
  font-weight: 500;
}
</style>
